Secciones y líneas generales de un documento HTML5

La especificación HTML5 trae muchos nuevos elementos a los desarrolladores web, permitiéndoles describir la estructura de un documento web con semántica estandarizada. Este documento describe estos elementos y cómo usarlos para definir el perfil de cualquier documento.

Problemas resueltos por HTML5

La definición de la estructura de un documento en HTML 4 y su algoritmo de perfilado es muy tosco y genera numerosos problemas:

  1. HTML5 quita la necesidad de elementos <div> para definir secciones semánticas sin definir valores específicos para los atributos class, introduciendo un nuevo elemento, <section>, el elemento de sección HTML.
  2. Mezclar varios documentos es difícil: la inclusión de un sub-documento en un documento principal. Esto se resuelve en HTML5 con los elementos de seccionado (<article>, <section>, <nav> y <aside>) son siempre subsecciones de su sección ancestra más cercana.
  3. HTML5 introduce el elemento <hgroup> que oculta todos los elementos de cabecera excepto el primero de más alto rango (por ejemplo, 
        	 <hgroup>
    		<h1>Justine</h1>
    		<h2>Les Malheurs de la Vertu</h2>
    	 </hgroup>
    crea el perfil 1. Justine).
  4. Un documento puede tener secciones especiales conteniendo información relacionado que no es parte del flujo principal. HTML5 introduce el elemento <aside> permitiendo a dichas secciones no ser parte del perfil principal.
  5. Hay información relacionada no al documento pero si al sitio entero, como logos, menús, tablas de contenidos, o información de derechos de autor y notas legales. Para ese propósito, HTML5 introduce tres elementos de sección específicos:

De manera más general, HTML5 trae precisión a las características de seccionado y cabecera, permitiendo a los perfiles de documento ser predecibles y usados por el navegador para mejorar la experiencia de usuario.

El algoritmo de perfilado de HTML5

Definiendo secciones en HTML5

Todo el contenido incluido dentro del elemento <body> es parte de una sección. Las secciones en HTML5 pueden ser anidadas. Además de la sección principal, definida por el elemento <body>, los límites de la sección son definidos explícita o implícitamente. La secciones definidas explícitamente son el contenido definido en las etiquetas <body>, <section>, <article>, <aside>, <footer>, <header>, y <nav>.

DEFINICION:

<body>
Body: del inglés body. En castellano: cuerpo. Es el contenedor de los contenidos. Su mision es contener los elementos que dan forma al documento.
<section>
Genera una sección de contenido, en el cuál podemos ubicar dentro muchos otros tipos de sección
<article>
El Elemento article de HTML (<article>) representa una composición auto-contenida en un documento, página, una aplicación o en el sitio, que se destina a distribuir de forma independiente o reutilizable, por ejemplo, en la sindicación. Podría ser un mensaje en un foro, un artículo de una revista o un periódico, una entrada de blog, un comentario de un usuario, un widget interactivo o gadget, o cualquier otro elemento independiente del contenido.
<aside>
El Elemento HTML Aside (<aside>) representa una sección de una página que consiste en contenido que está tangencialmente relacionado con el contenido que le rodea, que podría ser considerado independiente de ese contenido. Estas secciones son a menudo representadas como barras laterales o como inserciones y contienen una explicación al margen como una definición de glosario, elementos relacionados indirectamente, como publicidad, la biografía del autor, o en aplicaciones web, la información de perfil o enlaces a blogs relacionados.
<footer>
El Elemento HTML Footer (<footer>) representa un pie de página para el contenido de sección más cercano o el elemento raíz de sección. Un pie de página típicamente contiene información acerca de el autor de la sección, datos de derechos de autor o enlaces a documentos relacionados.
<header>
El elemento de HTML Header (<header>) representa un grupo de ayudas introductorias o de navegación. Puede contener algunos elementos de encabezado, pero también otros elementos como un logo, una sección que aglutine secciones de encabezados, una formulario de búsqueda o cosas parecidas.
<nav>
(<nav>) crea un menú de navegación.
Nota: Cada sección puede tener su propia jerarquía de cabeceras. Por lo tanto, incluso una sección anidada puede tener un elemento <h1>.
Consulte también: Definiendo cabeceras en HTML5.

Ejemplo:

	<section>
		<h1>Forest elephants</h1>
		<section>
			<h1>Introduction</h1>
			<p>In this section, we discuss the lesser known forest elephants.</p>
		</section>
		<section>
			<h1>Habitat</h1>
			<p>Forest elephants do not live in trees but among them.</p>
		</section>
		<aside>
			<p>advertising block</p>
		</aside>
	</section>
	<footer>
		<p>© 2014 The Itlit company</p>
	</footer>

 

 

Realizado por: Pedro Luis Palomo